<template>
  <div class="issued">
    <div class="tools-container" style="margin-top: 20px; margin-left: 20px">
      <div class="buttons">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addShow = true">新建下发周期</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table ref="table" v-loading="listLoading" :data="tableData" class="table-container" element-loading-text="加载中..." border center style="width: 95%; margin:0 auto">
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="levelName" label="警报等级" />
      <el-table-column prop="sceneName" label="场景名" />
      <el-table-column prop="dinterval" label="下发周期/s" />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditClick(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 组件 -->
    <el-pagination :current-page.sync="pageJson.page" :page-size="pageJson.size" :total="total" :page-sizes="[5,10,20,30,50]" class="pagination-container" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="addShow" width="60%">
      <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rule">
        <el-form-item label="警报等级" prop="levelName">
          <el-input v-model="addForm.levelName" />
        </el-form-item>
        <el-form-item label="场景名" prop="sceneId">
          <el-select v-model="addForm.sceneId" placeholder="请选择">
            <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="下发周期/s" prop="dinterval">
          <el-input v-model.number="addForm.dinterval" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateClick('addForm')">创 建</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="editShow" width="60%">
      <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rule">
        <el-form-item label="警报等级" prop="levelName">
          <el-input v-model="editForm.levelName" />
        </el-form-item>
        <el-form-item label="场景名" prop="sceneId">
          <el-select v-model="editForm.sceneId" placeholder="请选择">
            <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="下发周期/s" prop="dinterval">
          <el-input v-model.number="editForm.dinterval" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit('editForm')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSceneList } from '@/api/scene'
import { getIssued, addIssued, editIssued, delIssued } from '@/api/issued'

export default {
  name: 'Issued',
  data() {
    let validatedinterval = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入下发周期'))
      } else {
        if (value < 30) {
          callback(new Error('值不能小于30'))
        }
        callback()
      }
    }
    return {
      listLoading: true,
      sceneList: [],
      tableData: [],
      pageJson: {
        page: 1,
        size: 5
      },
      total: 0,
      addShow: false,
      addForm: {
        levelName: '',
        dinterval: '',
        sceneId: ''
      },
      editShow: false,
      editForm: {
        levelName: '',
        dinterval: '',
        sceneId: ''
      },
      rule: {
        levelName: [
          { required: true, message: '请输入警报等级', trigger: 'blur' }
        ],
        dinterval: [
          { validator: validatedinterval, trigger: 'blur' }
        ],
        sceneId: [
          { required: true, message: '请选择场景名', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getScene()
    this.getData()
  },
  methods: {
    // 获取场景列表
    getScene() {
      getSceneList().then(res => {
        if (res.ok) {
          this.sceneList = res.data
        }
      })
    },
    // 获取数据
    getData() {
      const { page, size } = this.pageJson
      getIssued({
        page,
        size
      }).then(res => {
        if (res.ok) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageJson.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageJson.page = val
      this.getData()
    },
    // 新增弹出
    handleCreateClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { levelName, dinterval, sceneId } = this.addForm
          addIssued({
            levelName,
            sceneId,
            dinterval
          }).then(res => {
            if (res.ok) {
              this.$message({
                message: res.data,
                type: 'success',
                duration: 800
              })
              this.addShow = false
              this.getData()
              this.addForm = {
                levelName: '',
                dinterval: '',
                sceneId: ''
              }
            }
          })
        }
      })
    },
    // 修改打开
    handleEditClick(data) {
      this.editShow = true
      this.editForm = {
        id: data.id,
        levelName: data.levelName,
        dinterval: data.dinterval,
        sceneId: data.sceneId
      }
    },
    // 修改提交
    handleEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { id, levelName, dinterval, sceneId } = this.editForm
          editIssued({
            id,
            sceneId,
            levelName,
            dinterval
          }).then(res => {
            if (res.ok) {
              this.$message({
                message: res.msg,
                type: 'success',
                duration: 800
              })
              this.editShow = false
              this.getData()
            }
          })
        }
      })
    },
    // 删除
    handleDeleteClick(data) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delIssued(data.id).then(res => {
          if (res.ok) {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 800
            })
            this.getData()
          }
        })
      }).catch(() => {
        console.log('取消删除')
      })
    }
  }
}
</script>